<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .one{
            background-color: blue;
            width: 200px;
            height: 200px;
        }
        .two{
            background-color: rgb(248, 150, 12);
            width: 200px;
            height: 200px;
        }

        .three{
            background-color: rgb(25, 199, 22);
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind 动态绑定属性 -->
         <input type="text" v-model="url">

         <a v-bind:href="url">跳转</a>
         <div v-bind:[title]="test">

         </div>
         <!-- 冒号左边是类名 右边是条件 条件为真加载 为假不加载 -->
          <input type="checkbox" v-model="flag">
          <input type="number" v-model="flag">
         <!-- <div v-bind:class="{one:flag==0}" v-on:click="fun"></div>
         <div v-bind:class="{one:flag==1}" v-on:click="fun"></div>
         <div v-bind:class="{one:flag==2}" v-on:click="fun"></div> -->
         <!-- <div v-bind:class="{one:flag==0,two:flag==1,three:flag==2}" v-on:click="fun"></div> -->
          <!-- <div v-bind:style="{fontSize:flag+'px'}">222222</div> -->
           <div :style="{color:flag==0?'red':''}">111</div>
           <div :style="{color:flag==1?'red':''}">222</div>
           <div :style="{color:flag==2?'red':''}">333</div>
    </div>
    
</body>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            url:"http://www.bilibili.com",
            class:"one",
            test:"text",
            title:"class",
            flag:"",
        },
        methods:{
            fun(){
                this.flag=!this.flag
            }
        }
    })
</script>
</html>